<template>

  <div>

    <form action="/">
      <van-search
        v-model="query"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">
      <van-cell v-for="item in list" :key="item.id"  >
        <van-row >
          <van-col span="6"><van-image width="50" height="50" :src="item.avatar"/></van-col>
          <van-col span="8">{{item.nick_name}}</van-col>
          <van-col span="5"><van-button type="primary" size="small" @click="showDate(item)" >调整时间</van-button></van-col>
          <van-col span="5"><van-button type="primary" size="small" @click="showMenu(item)">设置会员</van-button></van-col>
        </van-row>
        <van-row >
          <van-col span="24">会员：{{item.member_type_name}}</van-col>
        </van-row>
        <van-row >
          <van-col span="24">过期时间：{{item.expire_time}}</van-col>
        </van-row>

      </van-cell>
    </van-list>

    <van-popup v-model="isShowDate" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker
       v-model="currentDate"
       type="date"
       title="选择年月日"
       @confirm="confirmDate"
       @cancel="cancel"
       :min-date="minDate"
       :max-date="maxDate"
      />
    </van-popup>

    <van-action-sheet v-model="isShowMenu" :actions="actions" @select="onSelect" />


  </div>

</template>

<script>

import { myGet,myPost } from '@/utils/myRequest'
import { Dialog } from 'vant';
import { Toast } from 'vant';
import { ActionSheet } from 'vant';
const urlUserLst = '/guard/user/lst';
const urlAddUser = '/guard/user/add';
const urlSetMember = '/guard/user/setMember';
export default {
  name: 'user',
  data() {
    return {
      query:"",

      list: [],
      loading: false,
      finished: false,

      isShowDate:false,
      minDate: new Date(2023, 0, 1),
      maxDate: new Date(2050, 12, 31),
      currentDate: new Date((new Date()).getFullYear(), (new Date()).getMonth(), (new Date()).getDate()),
      currentUser:{},

      isShowMenu:false,
      actions: [{ name: '首试',value:'first' }, { name: '月会员',value:'month' },
        { name: '季度会员',value:'quarter' },{ name: '年会员',value:'year' }],
    };
  },
  methods: {

    onSearch(val) {
      this.query = val
      this.onLoad()
    },

    onCancel(){
      this.query = ""
    },

    onSelect(item) {
      Dialog.confirm({
        title: '确认',
        message: '确定要给“'+this.currentUser.nick_name+'”设置'+item.name,
      }).then(() => {
        this.isShowMenu = false;
        myGet(urlSetMember, {id:this.currentUser.id,type:item.value } ).then(res=>{
          if(res.status){
            Toast('设置成功！');
            this.onLoad();
          }
        })
      })
    },


    confirmDate(value){
      const date = new Date(value)
      const year = date.getFullYear()
      const month = date.getMonth()+1
      const day = date.getDate()
      const str = year+"-"+month+"-"+day
      const msg = "确定要设置 “"+str+"” 吗？ "
      Dialog.confirm({
        title: '确认',
        message: msg,
      }).then(() => {
          this.setExpireTime(str)
        })
    },

    setExpireTime(date){
      date = date+" 23:59:59"
      const data = {expireTime:date,id:this.currentUser.id}
      myPost(urlAddUser,data).then(res=>{
        if(res.status){
          Toast('设置成功！');
          this.isShowDate = false;
          this.onLoad()
        }
      })
    },
    cancel(){
      this.isShowDate = false
      this.currentUser = { }
    },
    showDate(user){
      this.isShowDate = true;
      this.currentUser = user
    },
    showMenu(user){
      this.isShowMenu = true;
      this.currentUser = user
    },
    onLoad() {
      myGet(urlUserLst,{account:this.query}).then(res=>{
        if(res.status){
          this.list = res.data.records
        }else{

        }
      })
    },
  },

  mounted() {
    this.loading = true
    this.finished = true
    this.onLoad()
  }
}
</script>

<style scoped>

</style>
